<template>
	<view class="page">
		<div class="title">基本信息</div>
		<div class="form">
			<div class="list">
				<span class="left">姓名</span>
				<span class="right">
					<input type="text" v-model="name" placeholder="请输入您的真实姓名" />
				</span>
			</div>
			<div class="list">
				<span class="left">手机号码</span>
				<span class="right">
					<input type="text" v-model="mobile" placeholder="请输入手机号" />
				</span>
			</div>
			<div class="list">
				<span class="left">身份证号</span>
				<span class="right">
					<input type="text" v-model="sfz" placeholder="请输入身份证号" />
				</span>
			</div>
			<!-- <div class="list">
				<span class="left">详细地址</span>
				<span class="right">
					<input type="text" placeholder="请输入详细地址" v-model="address" />
				</span>
			</div> -->
			<div class="list">
				<span class="left">上传证件</span>
				<div style="width: 100%;margin-top: 20rpx;">
					<span class="card_01" @click="chooseImage(1)">
						<image :src="zmsfimage || '../../static/vipRegister_01.png'"></image>
					</span>
					<span class="card_01" @click="chooseImage(2)">
						<image :src="fmsfimage || '../../static/vipRegister_02.png'"></image>
					</span>
				</div>
			</div>
		</div>
		<div class="title">行驶证信息 <image @click="upLoadCard" src="../../static/vipRegister_03.png" mode=""></image>
		</div>
		<div class="form" style="padding-bottom: 0;">
			<div class="list">
				<span class="left">车辆类型</span>
				<span class="right">
					<input type="text" v-model="cartype" placeholder="请输入车辆类型" />
				</span>
			</div>
			<div class="list">
				<span class="left">住址</span>
				<span class="right">
					<input type="text" v-model="address" placeholder="请输入住址" />
				</span>
			</div>
			<div class="list">
				<span class="left">使用性质</span>
				<span class="right">
					<input type="text" v-model="syxz" placeholder="请输入使用性质" />
				</span>
			</div>
			<div class="list">
				<span class="left">品牌型号</span>
				<span class="right">
					<input type="text" v-model="ppxh" placeholder="请输入品牌型号" />
				</span>
			</div>
			<div class="list">
				<span class="left">车辆识别代码</span>
				<span class="right">
					<input type="text" v-model="clsbdm" placeholder="请输入识别代码" />
				</span>
			</div>
			<div class="list">
				<span class="left">发动机号码</span>
				<span class="right">
					<input type="text" v-model="fdjhm" placeholder="请输入发动机号码" />
				</span>
			</div>
			<div class="list">
				<span class="left">注册日期</span>
				<span class="right">
					<input type="text" v-model="bxdjr" placeholder="请输入注册日期" />
				</span>
			</div>
			<div class="list">
				<span class="left">车牌号</span>
				<span class="right">
					<input type="text" v-model="carno" placeholder="请输入车牌号" />
				</span>
			</div>
		</div>
		<div class="input" @click="register">
			<button>提交申请</button>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sourceType: ['camera', 'album'],
				zmsfimage: "",
				fmsfimage: "",
				realname: "",
				mobile: "",
				address: "",
				sfz: "",
				cartype: "",
				carno: "",
				syxz: "",
				ppxh: "",
				clsbdm: "",
				fdjhm: "",
				bxdjr: "",
			}
		},
		methods: {
			chooseImage(type) {
				uni.chooseImage({
					sourceType: this.sourceType,
					count: 1,
					success: (res) => {
						var imgFiles = res.tempFilePaths[0];
						console.log(imgFiles)
						uni.uploadFile({
							// 需要上传的地址
							url: this.$domain + 'common/upload',
							header: {
								'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
								'token': uni.getStorageSync('token') || ""
							},
							filePath: imgFiles,
							name: 'file',
							success: (res1) => {
								// 显示上传信息
								var res1 = JSON.parse(res1.data);
								if (res1.code == 1) {
									if (type == 1) {
										this.zmsfimage = res1.data.fullurl;
									} else {
										this.fmsfimage = res1.data.fullurl;
									}
								}
							}
						});
					}
				})
			},
			upLoadCard() {
				uni.chooseImage({
					sourceType: this.sourceType,
					count: 1,
					success: (res) => {
						var imgFiles = res.tempFilePaths[0];
						console.log(imgFiles)
						uni.showLoading({
							title: '正在识别中...',
							mask: false
						});
						uni.getFileSystemManager().readFile({
							filePath: imgFiles,
							encoding: 'base64',
							success: r => {
								this.$post('shop/vehicleLicense', {
									image: r.data
								}, (res) => {
									 uni.hideLoading()
									this.address = res.address;
									this.bxdjr = res.bxdjr;
									this.carno = res.carno;
									this.cartype = res.cartype;
									this.clsbdm = res.clsbdm;
									this.fdjhm = res.fdjhm;
									this.ppxh = res.ppxh;
									this.syxz = res.syxz;
									console.log(res)
								})
							}
						})
						return
						uni.uploadFile({
							// 需要上传的地址
							url: this.$domain + 'common/upload',
							header: {
								'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
								'token': uni.getStorageSync('token') || ""
							},
							filePath: imgFiles,
							name: 'file',
							success: (res1) => {
								// 显示上传信息
								var res1 = JSON.parse(res1.data);
								console.log(res1)
								this.$post('shop/vehicleLicense', {
									image: res1.data.fullurl
								}, (res) => {
									this.address = res.address;
									this.bxdjr = res.bxdjr;
									this.carno = res.carno;
									this.cartype = res.cartype;
									this.clsbdm = res.clsbdm;
									this.fdjhm = res.fdjhm;
									this.ppxh = res.ppxh;
									this.syxz = res.syxz;
									console.log(res)
								})
							}
						});
					}
				})
			},
			register() {
				var params = {
					name: this.name,
					mobile: this.mobile,
					sfz: this.sfz,
					zmsfimage: this.zmsfimage,
					fmsfimage: this.fmsfimage,
					cartype: this.cartype,
					carno: this.carno,
					address: this.address,
					syxz: this.syxz,
					ppxh: this.ppxh,
					clsbdm: this.clsbdm,
					bxdjr: this.bxdjr,
					fdjhm: this.fdjhm,

				}
				if (!params.name) {
					uni.showToast({
						title: "请输入姓名！",
						icon: "none"
					});
					return
				}
				if (!params.mobile) {
					uni.showToast({
						title: "请输入手机号！",
						icon: "none"
					});
					return
				}
				if (!params.sfz) {
					uni.showToast({
						title: "请输入身份证号！",
						icon: "none"
					});
					return
				}
				if (!params.zmsfimage) {
					uni.showToast({
						title: "请上传身份证正面照！",
						icon: "none"
					});
					return
				}
				if (!params.fmsfimage) {
					uni.showToast({
						title: "请上传身份证反面照！",
						icon: "none"
					});
					return
				}
				if (!params.cartype) {
					uni.showToast({
						title: "请输入车辆类型！",
						icon: "none"
					});
					return
				}
				if (!params.carno) {
					uni.showToast({
						title: "请输入车牌号！",
						icon: "none"
					});
					return
				}
				if (!params.address) {
					uni.showToast({
						title: "请输入住址！",
						icon: "none"
					});
					return
				}
				if (!params.syxz) {
					uni.showToast({
						title: "请输入使用性质！",
						icon: "none"
					});
					return
				}
				if (!params.ppxh) {
					uni.showToast({
						title: "请输入品牌型号！",
						icon: "none"
					});
					return
				}
				if (!params.clsbdm) {
					uni.showToast({
						title: "请输入车辆识别代码！",
						icon: "none"
					});
					return
				}
				if (!params.fdjhm) {
					uni.showToast({
						title: "请输入发动机号码！",
						icon: "none"
					});
					return
				}
				if (!params.bxdjr) {
					uni.showToast({
						title: "请输入注册日期！",
						icon: "none"
					});
					return
				}

				this.$post('shop/customeradd', params, (res) => {
					uni.showToast({
						title: "提交成功！",
					})
					uni.reLaunch({
						url: "/pages/my/my"
					});
				})
			},
			getAuthenticationinfo() {
				return
				this.$post('user/authenticationinfo', {}, (res) => {
					if (!res) {
						return
					}
					this.realname = res.realname;
					this.mobile = res.mobile;
					this.address = res.address;
					this.sfzzimage = res.sfzzimage;
					this.fmsfimage = res.fmsfimage;
				})
			},
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo');
			this.getAuthenticationinfo()
			var that = this;
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					console.log(res)
					that.lat = res.latitude;
					that.lng = res.longitude;
				}
			});
		}
	}
</script>

<style>
	page {
		background-color: #F6F6F6;
	}

	.form {
		font-size: 30rpx;
		color: #333;
		background-color: #FFFFFF;
		padding: 0 24rpx;
		padding-bottom: 50rpx;
		margin-bottom: 20rpx;
	}

	.title {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		background-color: #FFFFFF;
		padding: 0 24rpx;
		border-bottom: 2rpx solid #E3E3E3;
	}

	.title image {
		float: right;
		width: 44rpx;
		height: 44rpx;
		margin-top: 18rpx;
	}

	.form .list {
		padding: 30rpx 0;
		border-bottom: 1px solid #e5e5e5;
		font-size: 30rpx;
		display: flex;
		flex-flow: row wrap;
	}

	.form .list:last-child {
		border: none;
	}

	.form .list::after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}

	.form .list .left {
		width: 200rpx;
	}

	.form .list .right {
		flex: 1;
	}

	.form .list .right image {
		width: 200rpx;
	}

	.input {
		margin: 0 auto;
		width: 630rpx;
		margin-top: 80rpx;
		margin-bottom: 40rpx;
	}

	.input button {
		color: #FFFFFF;
		font-size: 34rpx;
		text-align: center;
		height: 98rpx;
		line-height: 98rpx;
		background: #22BF8A;
		border-radius: 8px;
	}

	.card_01 {
		margin-right: 20rpx;
	}

	.card_01:last-child {
		margin-right: 0;
	}

	.card_01 image {
		width: 340rpx;
		height: 250rpx;
	}

	.inline_label {
		display: inline-block;
		margin-right: 30rpx;
	}

	.inline_label view {
		display: inline-block;
	}
</style>
